<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document-精品</title>
    <link href="__ROOT__/Public/img/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="/WapPublic/css/bootstrap.min.css">
    <link rel="stylesheet" href="__ROOT__/WapPublic/css/wapIndex.css">
    <link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="__ROOT__/Public/css/website.css">-->
    <!--<link rel="stylesheet" href="http://apps.bdimg.com/libs/layer/2.1/skin/layer.css">-->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <!--<script type="text/javascript" src="http://apps.bdimg.com/libs/layer/2.1/layer.js"></script>-->
    <!--<script type="text/javascript" src="__ROOT__/Public/js/index.js"></script>-->
</head>
<body>
<div class="header">
    <div class="header-info">
        <div class="header-top clearfix">
            <a class="com-hearder-icon mailbox-icon" href="javascript:;" ></a>
            <div class="search">
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                </form>
            </div>
            <a href="javascript:;" class="com-hearder-icon time-icon"></a>
            <a href="javascript:;" class="com-hearder-icon download-icon"></a>
        </div>
    </div>
    <div class="header-nav">
        <ul class="clearfix">
            <li><a href="/wap.php/Index">推荐</a></li>
            <li><a href="/wap.php/Index/classify">分类</a></li>
            <li><a href="/wap.php/Index/classic">精品</a></li>
            <li><a href="/wap.php/Index/liveRadio" class="header-nav-active header-nav-active-border">直播</a></li>
            <li><a href="/wap.php/Index/broadcast">广播</a></li>
        </ul>
    </div>
</div>
<div class="main-wap-wrapper">
    <div class="classic">
        <div class="classic-content-list">
            <div class="classic-type">
                <ul class="classic-type-slide clearfix">
                    <li><a href="javascript:;"><img src="/WapPublic/img/mailbox.png">大师课</a></li>
                    <li><a href="javascript:;"><img src="/WapPublic/img/mailbox.png">畅销榜</a></li>
                    <li><a href="javascript:;"><img src="/WapPublic/img/mailbox.png">新品榜</a></li>
                    <li><a href="javascript:;"><img src="/WapPublic/img/mailbox.png">有声书</a></li>
                    <li><a href="javascript:;"><img src="/WapPublic/img/mailbox.png">筛选</a></li>
                    <li><a href="javascript:;"><img src="/WapPublic/img/mailbox.png">易购</a></li>
                </ul>
            </div>
            <div class="classic-swiper classic-padding live-swiper">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="/WapPublic/img/swiperimg1.jpg"></div>
                        <div class="swiper-slide"><img src="/WapPublic/img/swiperimg2.jpeg"></div>
                        <div class="swiper-slide"><img src="/WapPublic/img/swiperimg3.jpg"></div>
                        <div class="swiper-slide"><img src="/WapPublic/img/swiperimg4.jpg"></div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="classic-padding">
                <div class="hot-title clearfix">
                    <span class="hot-left live-active-event active live-active-style">热门</span>
                    <span class="hot-left live-active-event">新品</span>
                    <span class="hot-right">更多 ></span>
                </div>
                <ul class="hot-content live-content clearfix">
                    <li>
                        <a href="javascript:;">
                            <div class="hot-img-poster">
                                <img src="/WapPublic/img/poster.jpg">
                                <p class="img-bottom-num">直播中</p>
                            </div>
                            <p class="hot-content-tit">蔡康永的201堂情商蔡康永的201堂情商课课</p>
                            <p class="hot-content-price live-author clearfix"><span class="float-left">珍视雪梨啦啦啦啦啦啦啦啦啦的</span><span class="float-right">#翻唱</span></p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="hot-img-poster">
                                <img src="/WapPublic/img/poster.jpg">
                                <p class="img-bottom-num">直播中</p>
                            </div>
                            <p class="hot-content-tit">蔡康永的201堂情商蔡康永的201堂情商课课</p>
                            <p class="hot-content-price live-author clearfix"><span class="float-left">珍视雪梨啦啦啦啦啦啦啦啦啦的</span><span class="float-right">#翻唱</span></p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="hot-img-poster">
                                <img src="/WapPublic/img/poster.jpg">
                                <p class="img-bottom-num">直播中</p>
                            </div>
                            <p class="hot-content-tit">蔡康永的201堂情商蔡康永的201堂情商课课</p>
                            <p class="hot-content-price live-author clearfix"><span class="float-left">珍视雪梨啦啦啦啦啦啦啦啦啦的</span><span class="float-right">#翻唱</span></p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="hot-img-poster">
                                <img src="/WapPublic/img/poster.jpg">
                                <p class="img-bottom-num">直播中</p>
                            </div>
                            <p class="hot-content-tit">蔡康永的201堂情商蔡康永的201堂情商课课</p>
                            <p class="hot-content-price live-author clearfix"><span class="float-left">珍视雪梨啦啦啦啦啦啦啦啦啦的</span><span class="float-right">#翻唱</span></p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="hot-img-poster">
                                <img src="/WapPublic/img/poster.jpg">
                                <p class="img-bottom-num">直播中</p>
                            </div>
                            <p class="hot-content-tit">蔡康永的201堂情商蔡康永的201堂情商课课</p>
                            <p class="hot-content-price live-author clearfix"><span class="float-left">珍视雪梨啦啦啦啦啦啦啦啦啦的</span><span class="float-right">#翻唱</span></p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="hot-img-poster">
                                <img src="/WapPublic/img/poster.jpg">
                                <p class="img-bottom-num">直播中</p>
                            </div>
                            <p class="hot-content-tit">蔡康永的201堂情商蔡康永的201堂情商课课</p>
                            <p class="hot-content-price live-author clearfix"><span class="float-left">珍视雪梨啦啦啦啦啦啦啦啦啦的</span><span class="float-right">#翻唱</span></p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="hot-img-poster">
                                <img src="/WapPublic/img/poster.jpg">
                                <p class="img-bottom-num">直播中</p>
                            </div>
                            <p class="hot-content-tit">蔡康永的201堂情商蔡康永的201堂情商课课</p>
                            <p class="hot-content-price live-author clearfix"><span class="float-left">珍视雪梨啦啦啦啦啦啦啦啦啦的</span><span class="float-right">#翻唱</span></p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="hot-img-poster">
                                <img src="/WapPublic/img/poster.jpg">
                                <p class="img-bottom-num">直播中</p>
                            </div>
                            <p class="hot-content-tit">蔡康永的201堂情商蔡康永的201堂情商课课</p>
                            <p class="hot-content-price live-author clearfix"><span class="float-left">珍视雪梨啦啦啦啦啦啦啦啦啦的</span><span class="float-right">#翻唱</span></p>
                        </a>
                    </li>
                </ul>
                <ul class="hot-content live-content live-hidden clearfix">
                    <li>
                        <a href="javascript:;">
                            <div class="hot-img-poster">
                                <img src="/WapPublic/img/poster.jpg">
                                <p class="img-bottom-num">直播中</p>
                            </div>
                            <p class="hot-content-tit">222蔡康永的201堂情商蔡康永的201堂情商课课</p>
                            <p class="hot-content-price live-author clearfix"><span class="float-left">珍视雪梨啦啦啦啦啦啦啦啦啦的</span><span class="float-right">#翻唱</span></p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="hot-img-poster">
                                <img src="/WapPublic/img/poster.jpg">
                                <p class="img-bottom-num">直播中</p>
                            </div>
                            <p class="hot-content-tit">蔡康永的201堂情商蔡康永的201堂情商课课</p>
                            <p class="hot-content-price live-author clearfix"><span class="float-left">珍视雪梨啦啦啦啦啦啦啦啦啦的</span><span class="float-right">#翻唱</span></p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="hot-img-poster">
                                <img src="/WapPublic/img/poster.jpg">
                                <p class="img-bottom-num">直播中</p>
                            </div>
                            <p class="hot-content-tit">蔡康永的201堂情商蔡康永的201堂情商课课</p>
                            <p class="hot-content-price live-author clearfix"><span class="float-left">珍视雪梨啦啦啦啦啦啦啦啦啦的</span><span class="float-right">#翻唱</span></p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>


<script>
    $(function () {
        $(".live-active-event").click(function () {
            $(".live-content").addClass("live-hidden");
            $(".live-active-event").removeClass("active live-active-style");
            $(this).addClass("active live-active-style");
            var _index = $(this).index();
            $(this).parent().parent().find(".live-content").eq(_index).removeClass("live-hidden");
        });

        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal',
            loop: true,
            autoplay:3000,
            autoplayDisableOnInteraction:false,
            paginationClickable :true,
            // 如果需要分页器
            pagination: '.swiper-pagination',
         })
    })
</script>
</body>
</html>